import { defineComponent } from 'vue'
import { Layout } from '../containers'
import { usePrefix } from '../hooks'
import cls from 'classnames'

const StudioPanelInternal = defineComponent({
  props: ['logo', 'actions'],
  setup(props, { slots, attrs }) {
    const prefix = usePrefix('main-panel')
    if (props.logo || props.actions) {
      return () => (
        <div class={cls(prefix + '-container', 'root', attrs.class as string)}>
          <div class={prefix + '-header'}>
            <div class={prefix + '-header-logo'}>{props.logo}</div>
            <div class={prefix + '-header-actions'}>{props.actions}</div>
          </div>
          <div class={prefix}>{slots.default?.()}</div>
        </div>
      )
    }
    return () => <div class={cls(prefix, 'root')}>{slots.default?.()}</div>
  },
})

export const StudioPanel = defineComponent({
  props: ['logo', 'actions'],
  setup(props, { slots }) {
    return () => (
      <Layout>
        <StudioPanelInternal {...props}>
          {slots.default?.()}
        </StudioPanelInternal>
      </Layout>
    )
  },
})
